<!-- 文字横向滚动播放 -->
<template>
  <view class='text-scroll-wrap'>
		<view class="text-content"
			:style="{
				left:leftMove+'px'
				}"
			v-if="textScrollWrap"
			>
			<view 
				class="text-item"
				 :class="{
					 active: textKey || imageKey ? JSON.stringify(actives).indexOf(JSON.stringify(item.auctionName)) > -1: actives.includes(item.auctionName)
				 }"
				v-for="(item,index) in myList" 
				:key="index" 
				@click="clickThis($event)" :data-text="textKey || imageKey ? JSON.stringify(item.auctionName): item.auctionName">
				<view class="scroll-list-item-box">
					<view class="scroll-list-item-main">
						<view class="scroll-list-item-main-wrap">
							<view class="scroll-list-item-main-wrap-goods">
								<image class="scroll-list-item-main-wrap-goods-img" :src="item.auctionImg" mode=""></image>
							</view>
							<view class="scroll-list-item-info">
								<view class="scroll-list-item-info-title single-line"><text>{{item.auctionName}}</text></view>
								<!-- <view class="scroll-list-item-info-num single-line"><text>库存数量：{{item.num || 0}}</text></view> -->
								<view class="scroll-list-item-info-price">
									<text>￥{{item.auctionBuyNow}}</text>
									<view class="scroll-list-item-info-price-line"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="text">
					<image v-if="imageKey" :src="text[imageKey]" class="image"></image>
					{{type === 'text' ? (textKey ? text[textKey] : text) : ''}}
				</view> -->
			</view>			
		</view>
	</view>
</template>

<script>
export default {
  name: 'text-scroll-wrap',
  components: {},
  props: {
		list: { // 滚动列表
			type: Array,
			default: () => {
				return [];
			}
		},
		type: {// 类型
			type: String,
			default: 'text',
			validator: (value) => {
				return ['text', 'image'].indexOf(value) !== -1;
			}
		},
		textKey: { // 文字key值
			type: String,
			default: ''
		},
		imageKey: { // 图片key值
			type: String,
			default: ''
		},
		actives: { // 如果需要，此为已选列表
			type: Array,
			default: () => {
				return [];
			}
		},
		duration: { // 间隔时间
			type: [Number, String],
			default: 20
		},
		delay: { // 延迟时间
			type: [Number, String],
			default: 0
		},
		initPosition: { // 初始位置
			type: String,
			default: 'left',
			validator: (value) => {
				return ['left', 'right'].indexOf(value) !== -1;
			}
		}
	},
  data () {
    return {
			myList: [],
			leftMove: 0,
			firstItemWidth: 0,
			wrapWidth: 0,
			textScrollWrap:true,
			t:null,
			scrollContentTimer:null,
    };
  },
  // 组件实例化之前
  beforeCreate () {},
  // 组件创建完成
  created () {
		this.myList = this.list;
	},
  // 组件挂载之前
  beforeMount () {},
  // 组件挂载之后
  mounted () {
		let query = uni.createSelectorQuery().in(this);
		query.select('.text-item').boundingClientRect(data => {
			this.firstItemWidth = data.width;
		}).exec();
		query.select('.text-scroll-wrap').boundingClientRect(data => {
			this.wrapWidth = data.width;
			this.initPosition ==='left' ? this.leftMove = 0 : this.leftMove = this.wrapWidth;
		}).exec();
		if (this.delay<=0) {
			this.scrollContent();
		} else {
			this.t = setTimeout(() => {
				clearTimeout(this.t);
				this.scrollContent();
			}, Number(this.delay));
		}
		
	},
  // 组件数据更新时
  beforeUpdate () {},
  // 组价更新
  updated () {},
  // 组件销毁前
  beforeDestroy () {
	  clearTimeout(this.t);
	  clearInterval(this.scrollContentTimer)
  },
  // 组件销毁后
  destroyed () {
	  clearTimeout(this.t);
	  clearInterval(this.scrollContentTimer)
  },
  // 页面方法
  methods: {
		// 点击此项
		clickThis (e) {
			// console.log(e.currentTarget.dataset.text);
			this.$emit('change', e.currentTarget.dataset.text);
		},
		// 滚动
		scrollContent () {
			// let num = this.initPosition === 'left' ? 0 : this.wrapWidth;
			// setInterval(() => {
			// 	num--;
			// 	if (num < 0 && Math.abs(num) >= this.firstItemWidth) {
			// 		this.myList.push(this.myList[0]);
			// 		this.myList.splice(0, 1);
			// 		num += this.firstItemWidth;
			// 		let query = uni.createSelectorQuery().in(this);
			// 		query.selectAll('.text-item').boundingClientRect(data => {
			// 			this.firstItemWidth = data[1].width;
			// 		}).exec();
			// 	}
			// 	this.leftMove = num;
			// }, Number(this.duration));
			
			let num = this.initPosition === 'left' ? 0 : this.wrapWidth; 
			this.scrollContentTimer = setInterval(() => { 
				num--; 
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.text-item').boundingClientRect(data => { 
					if(data.length){ 
						this.width = data[data.length -1].left + data[data.length -1].width;
					} 
				}).exec(); 
				if(this.width === 0){ 
					num = 0; 
				} 
				
				this.leftMove = num;
			}, Number(this.duration)); 
		}
	}
};
</script>

<style lang='scss'>
.text-scroll-wrap{
	overflow: hidden;
	width: 100%;
	height: 296rpx;
	/* line-height: 68rpx; */
	position: relative;
	.text-content{
		display: inline-block;
		/* display: flex; */
		white-space: nowrap;
		height: 100%;
		position: absolute;
		top: 0;
		.text-item{
			height: 100%;
			display: inline-block;
			/* display: flex; */
			overflow: hidden;
			font-size: 28rpx;
			color: #666;
			flex-direction: column;
			justify-content: flex-end;
			width: 610rpx;
			min-width: 610rpx;
			height: 296rpx;
			max-height: 296rpx;
			margin-right: 20rpx;
			.text{
				padding: 0 30rpx;
				margin: 0 20rpx;
				background: #AFEEEE;
				border-radius: 50rpx;
				.image{
					display: inline-block;
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
				}
			}
			&.active .text{
				background: #1E90FF;
				color: #fff;
			}
		}
	}
}
.scroll-list-item-box{
	height: 100%;
	position: relative;
	.scroll-list-item-main{
		width: 100%;
		height: 256rpx;
		background: #262A34;
		border-radius: 40rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		.scroll-list-item-main-wrap{
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			.scroll-list-item-main-wrap-goods{
				width: 296rpx;
				height: 100%;
				position: relative;
				.scroll-list-item-main-wrap-goods-img{
					width: 264rpx;
					height: 264rpx;
					position: absolute;
					top: -40rpx;
					left: 32rpx;
					border-radius: 20rpx;
				}
			}
			.scroll-list-item-info{
				width: calc(100% - 296rpx);
				padding: 32rpx 0 0 40rpx;
				box-sizing: border-box;
				.scroll-list-item-info-title{
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC, '微软雅黑';
					font-weight: 400;
					color: #FFFFFF;
					font:caption;
				}
				.scroll-list-item-info-num{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC, '微软雅黑';
					font-weight: 400;
					color: #5D5F7A;
					margin-top: 4rpx;
					font:caption;
				}
				.scroll-list-item-info-price{
					font-size: 36rpx;
					font-family: Inter-Bold, Inter;
					font-weight: bold;
					color: #A06AF9;
					text-shadow: 0px 16rpx 32rpx rgba(0, 0, 0, 0.5);
					position: relative;
					margin-top: 78rpx;
					font:caption;
					.scroll-list-item-info-price-line{
						width: 116rpx;
						height: 20rpx;
						background: #86E9A4;
						box-shadow: 0px 16rpx 32rpx 0px rgba(0, 0, 0, 0.5);
						opacity: 0.05;
						position: absolute;
						bottom: 0rpx;
						left: 0;
					}
				}
			}
		}
	}
}
</style>
